<template>
  <div class="app-container">
    <com_header />
    <main>
      <!-- 选项列表 -->
      <ul class="games-templates">
        <li @click="handleChange(1)" class="temp-item">
          <img src="@/assets/props/icon1.png" alt="" />
          <p v-if="gameName" class="name">{{ gameName }} Gold</p>
        </li>
        <li @click="handleChange(2)" class="temp-item">
          <img src="@/assets/props/icon2.png" alt="" />
          <p v-if="gameName" class="name">{{ gameName }} Items</p>
        </li>
        <li @click="handleChange(3)" class="temp-item">
          <img src="@/assets/props/icon3.png" alt="" />
          <p v-if="gameName" class="name">{{ gameName }} Carry Run</p>
        </li>
      </ul>
      <!-- 金币列表 -->
      <el-table
        v-if="changeNum === 1 && coin_list.length"
        :data="coin_list"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="name" label="Products" width="auto">
          <template #default="scope">
            <div class="product-info">
              <div class="info">
                <p class="name">{{ scope.row.name }}</p>
                <p class="text">
                  {{ gameName + " - " + "Softcore " + scope.row.name }}
                </p>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="image"
          label="Image"
          align="center"
          width="600px"
        >
          <template #default="scope">
            <div class="pic">
              <img :src="scope.row.images[0]" alt="" />
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="price_formatted" label="Price">
          <template #default="scope">
            <p class="price">{{ scope.row.price_formatted }}</p>
          </template>
        </el-table-column>

        <el-table-column prop="action" label="Action">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="toPropsItem(scope.row)"
            >
              Buy Now
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 道具搜索 -->
      <div v-if="changeNum === 2" class="search">
        <el-input
          v-model="search_params"
          clearable
          style="width: 300px"
          placeholder="Search items"
          class="input-with-select"
        >
          <template #append>
            <el-button :icon="Search" @click="handleSearch" />
          </template>
        </el-input>
      </div>
      <!-- 道具列表  样式沿用‘金币’-->
      <div class="props-item">
        <el-table
          v-if="changeNum === 2 && product_list.length"
          :data="product_list"
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="name" label="Products" width="auto">
            <template #default="scope">
              <div class="product-info">
                <div class="info">
                  <p class="name">{{ scope.row.name }}</p>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="image"
            label="Image"
            align="center"
            width="600px"
          >
            <template #default="scope">
              <div class="pic">
                <img :src="scope.row.images[0]" alt="" />
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="price_formatted" label="Price">
            <template #default="scope">
              <p class="price">{{ scope.row.price_formatted }}</p>
            </template>
          </el-table-column>

          <el-table-column prop="action" label="Action">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="toPropsItem(scope.row)"
              >
                Buy Now
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <p v-if="!product_list.length" class="out-of">Sorry, no offers found.</p>
    </main>
  </div>
</template>

<script setup>
import com_header from "@/components/com_header/index.vue";
import { categories, productList } from "@/api/product";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { ref, nextTick, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Coin,
  CollectionTag,
  Coordinate,
  Search,
} from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();
const store = useStore();

// 操作栏切换
const changeNum = ref(1);
const handleChange = (num) => {
  changeNum.value = num;
  // 该功能尚未开通
  if (num === 3) {
    ElMessageBox.confirm(
      "The feature has not been activated yet, please look forward to it!",
      {
        confirmButtonText: "sure",
        cancelButtonText: "cancel",
        customClass: "messageBox",
        type: "",
        showClose: false,
      }
    )
      .then(() => {
        changeNum.value = 1;
        // 效果
        const item_list = document.querySelectorAll(".temp-item");
        item_list[0].classList.add("active");
        item_list[2].classList.remove("active");
      })
      .catch(() => {
        changeNum.value = 1;
        // 效果
        const item_list = document.querySelectorAll(".temp-item");
        item_list[0].classList.add("active");
        item_list[2].classList.remove("active");
      });
  }
};

// 表格
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "success-row"; //这是类名
  } else {
    return "";
  }
};

// 获取金币列表
const coin_list = ref([]);
const getCoinList = () => {
  if (
    route.query.id == 100300 ||
    route.query.id == 100311 ||
    route.query.id == 100308
  ) {
    productList({ category_id: 100317, page: 1, per_page: 50 }).then((res) => {
      coin_list.value = res.data.data;
      // console.log(coin_list.value);
    });
  } else if (
    route.query.id == 100309 ||
    route.query.id == 100303 ||
    route.query.id == 100307
  ) {
    productList({ category_id: 100318, page: 1, per_page: 50 }).then((res) => {
      coin_list.value = res.data.data;
      // console.log(coin_list.value);
    });
  } else {
    productList({ category_id: 100313, page: 1, per_page: 50 }).then((res) => {
      coin_list.value = res.data.data;
      // console.log(coin_list.value);
    });
  }
};
getCoinList();

// 获取道具列表
const gameName = ref("");
const product_list = ref([]);
const getProductList = () => {
  categories({ parent_ids: [route.query.id] }).then((res) => {
    gameName.value = res.data[0].name;
  });
  productList({ category_id: route.query.id, page: 1, per_page: 50 }).then(
    (res) => {
      product_list.value = res.data.data;
      // console.log(product_list.value);
    }
  );
};

// 跳转道具详情
const toPropsItem = (item) => {
  router.push({
    path: "/propsItem",
    query: { id: item.id },
  });
};

// 搜索
const search_params = ref("");
const handleSearch = () => {
  if (!search_params.value) {
    return;
  }
  productList({
    keyword: search_params.value,
    category_id: route.query.id,
    brand_id: 19,
    // page: 1,
    // per_page: 1,
  }).then((res) => {
    product_list.value = res.data.data;
  });
};

watch(
  () => search_params.value,
  (n) => {
    if (!n) {
      getProductList();
    }
  },
  {
    immediate: false,
    deep: true,
  }
);

watch(
  () => route.query.id,
  (n) => {
    if (n) {
      getProductList();
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

// 效果
nextTick(() => {
  const item_list = document.querySelectorAll(".temp-item");
  item_list.forEach((item, index, arr) => {
    arr[0].classList.add("active");
    item.addEventListener("click", () => {
      item.classList.add("active");
      arr.forEach((subItem, i) => {
        if (i !== index) {
          subItem.classList.remove("active");
        }
      });
    });
  });
});
</script>

<style lang="scss" scoped>
.app-container {
  padding: 120px 0;
  min-height: 100vh;
  background: #141922;
  main {
    margin: 0px auto;
    width: 1400px;
    .games-templates {
      margin-bottom: 20px;
      display: flex;
      gap: 20px;
      background: #1f2635;
      .temp-item {
        padding: 8px;
        width: fit-content;
        // display: flex;
        // align-items: center;
        color: #b4b7b7;
        // background: #545454;
        cursor: pointer;
        text-align: center;
        img {
          width: 50px;
          height: 50px;
          margin-bottom: 16px;
        }
        .name {
          font-size: 16px;
          font-weight: 700;
        }
      }
      .active {
        color: #fff;
        background: #141922;
        color: #ffa300;
      }
    }
    ::v-deep .el-table {
      --el-table-border-color: #1f2635;
      --el-table-row-hover-bg-color: none;
      th {
        font-size: 18px;
        font-weight: 400;
        color: #b4b7b7;
        background: #161c26;
        border-top: 1px solid #1f2635;
      }
      .success-row {
        background: #141922 !important;
      }
      tr {
        font-size: 16px;
        background: #161c26;
        // background: skyblue;
        &:hover {
          background-color: #333336 !important; /* 移除 hover 时的背景色 */
        }
      }
      .pic {
        margin: 0 auto;
        img {
          object-fit: contain;
          width: 120px;
          height: 120px;
          padding: 20px;
        }
      }
      .product-info {
        display: flex;
        align-items: center;

        .info {
          .name {
            font-weight: 700;
            color: #ffa300;
          }
          .text {
            font-size: 15px;
            color: #b4b7b7;
          }
        }
      }
      .price {
        font-weight: 700;
        color: #1abc5f;
      }
      .el-button {
        font-size: 15px;
        font-weight: 700;
        color: #000;
        border: none;
        border-radius: 8px;
        background: #c07e0c;
        border-radius: 0;
        &:hover {
          background: #ffa300;
        }
      }
    }
    // 搜索
    .search {
      padding: 20px 0px;
      margin-bottom: 20px;
      // display: flex;
      // justify-content: end;
      // background: #545454;
      ::v-deep .el-input {
        --el-input-focus-border: none;
        --el-input-focus-border-color: none;
        --el-input-hover-border-color: none;
        --el-input-border-color: none;
        border: none;
        box-shadow: none;
        background: #1f2635;
        .el-input__wrapper {
          border: none;
          background: #1f2635;
          .el-input__inner {
            font-size: 16px;
            color: #fff;
          }
        }
        .el-input-group__append {
          background: #263044;
          &:hover {
            background: #ffa300;
          }
        }
      }
      .el-button {
        color: #fff;
        border-radius: none;
      }
    }
    .out-of {
      font-size: 16px;
      color: #fff;
      text-align: center;
      margin-top: 50px;
    }
  }
}
</style>
